<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<!-- /**  
 * @Author: Wang Hongbin  
 * @Email:   wanghongbin@ngoos.org  
 * @Date:   2018-06-21 14:28:22  
 * @Last Modified by:   Wang Hongbin  
 * @Last Modified time: 2018-06-21 14:28:22  
 */ -->  
<f:section name="content">

<f:flashMessages />
<style>
	.tablewid-50{width: 80%;}
	label.control-label{font-size: 14px;margin-right: 5px;}
</style>
<div class="portlet light ">
    <div class="portlet-title">
        <div class="caption">
			<div class="btn-group btn-group-devided">
				<f:form action="statistics" id="searchForm" name="search" class="form-inline" method="POST">
					<div class="input-group">
						<f:form.select class="form-control" id="selectCountType" name="ctypes" value="{ctypes}"
							options="{countTypes}" optionValueField="uid" optionLabelField="name" />
					</div>
					<div class="input-group">
						<label class="control-label" for="sttime">开始时间</label>
						<div class="input-group date bs-datetime datetimepicker-datetime" id="sttime" data-date-format="yyyy-mm">
							<f:form.textfield name="sttime" value="{sttime}" class="form-control spinner" />
							<span class="input-group-addon">
								<button class="btn default date-set" type="button">
									<i class="fa fa-calendar"></i>
								</button>
							</span>
						</div>
					</div>
					<div class="input-group">
						<label class="control-label" for="overtime">结束时间</label>
						<div class="input-group date bs-datetime datetimepicker-datetime" id="overtime" data-date-format="yyyy-mm">
							<f:form.textfield name="overtime" value="{overtime}" class="form-control spinner" />
							<span class="input-group-addon">
								<button class="btn default date-set" type="button">
									<i class="fa fa-calendar"></i>
								</button>
							</span>
						</div>
					</div>
					<div class="input-group">
						<span class="input-group-btn">
							<f:form.submit class="btn btn-success" value="搜" />
						</span>
					</div>
				</f:form>
			</div>
		</div>
        <div class="actions">
        </div>
        <script src="typo3conf/ext/backsite/Resources/Public/scripts/bootstrap-datetimepicker.min.js?" type="text/javascript"></script>
		<script type="text/javascript">
			$("#sttime").datetimepicker({
				format:'yyyy-mm',
				language:'zh-CN',
				startView:3,
				minView:3,
				autoclose:true
			});
			$("#overtime").datetimepicker({
				format: 'yyyy-mm',
				language:'zh-CN',
				startView:3,
				minView:3,
				autoclose:true
			});
		</script>
        <div class="portlet-body">
            	<f:if condition="{ctypes}==0">
            		<f:then>
            			<div class="tablewid-50">
			            	<table class="tx_user table table-hover table-bordered">
								<thead>
									<tr class="uppercase">
										<th></th>
										<th>次数</th>
									</tr>
								</thead>
			                    <tbody>
									<f:for each="{tagList}" as="tag" iteration="itemIteration1">
										<tr>
											<td>{tag.name}</td>
				                            <td>{tag.num}</td>
										</tr>
									</f:for>
								</tbody>
							</table>
						</div>
            		</f:then>
            		<f:else if="{ctypes}==1">
            			<div class="tablewid-50">
	            			<table class="tx_user table table-hover table-bordered">
								<thead>
									<tr>
										<th rowspan="2"></th>
										<th colspan="2">人数</th>
										<th colspan="2">人次</th>
									</tr>
									<tr>
										<th>数量</th>
										<th>百分比</th>
										<th>数量</th>
										<th>百分比</th>
									</tr>
								</thead>
			                    <tbody>
									<f:for each="{tagList}" as="tag" iteration="itemIteration1">
										<tr>
											<td>{tag.name}</td>
				                            <td>{tag.pnum}</td>
				                            <td>{tag.ppercent}</td>
				                            <td>{tag.tnum}</td>
				                            <td>{tag.tpercent}</td>
										</tr>
									</f:for>
								</tbody>
							</table>
						</div>
            		</f:else>
            		<f:else if="{ctypes}==2">
            			<!-- 按照志愿者年龄统计 -->
            			<div class="tablewid-50">
	            			<table class="tx_user table table-hover table-bordered">
								<thead>
									<tr>
										<th rowspan="2"></th>
										<th colspan="2">人数</th>
										<th colspan="2">人次</th>
									</tr>
									<tr>
										<th>数量</th>
										<th>百分比</th>
										<th>数量</th>
										<th>百分比</th>
									</tr>
								</thead>
			                    <tbody>
									<f:for each="{tagList}" as="tag" iteration="itemIteration1">
										<tr>
											<td>{tag.name}</td>
				                            <td>{tag.pnum}</td>
				                            <td>{tag.ppercent}</td>
				                            <td>{tag.tnum}</td>
				                            <td>{tag.tpercent}</td>
										</tr>
									</f:for>
								</tbody>
							</table>
						</div>
            		</f:else>
            		<f:else if="{ctypes}==3">
            			<!-- 按照志愿者所在社区进行统计 -->
            			<div class="tablewid-50">
	            			<table class="tx_user table table-hover table-bordered">
								<thead>
									<tr>
										<th></th>
										<th>人次</th>
										<th>百分比</th>
									</tr>
								</thead>
			                    <tbody>
									<f:for each="{tagList}" as="tag" iteration="itemIteration1">
										<tr>
											<td>{tag.name}</td>
											<td>{tag.tnum}</td>
				                            <td>{tag.tpercent}</td>
										</tr>
									</f:for>
								</tbody>
							</table>
						</div>
            		</f:else>
            		<f:else if="{ctypes}==4">
            			<!-- 按照活动类别+标签统计 -->
            			<div class="tablewid-50">
	            			<table class="tx_user table table-hover table-bordered">
								<thead>
									<tr class="uppercase">
										<th colspan="2" width="50%"></th>
										<th width="20%">人次</th>
										<th width="20%">人数</th>
									</tr>
								</thead>
			                    <tbody>
									<f:for each="{tagList}" as="tag" iteration="itemIteration1">
										<f:if condition="{tag.buid}==0">
											<f:then>
												<td colspan="2" class="text-center">{tag.bname}</td>
												<td>{tag.data.tnum}</td>
												<td>{tag.data.pnum}</td>
											</f:then>
											<f:else>
												<f:for each="{tag.data}" as="data" iteration="itemIteration2">
													<tr>
														<f:if condition="{itemIteration2.isFirst}">
															<td rowspan="{data->f:count()}">{tag.bname}</td>
														</f:if>
														<td>{data.sname}</td>
														<td>{data.tnum}</td>
														<td>{data.pnum}</td>
													</tr>
												</f:for>
											</f:else>
										</f:if>
									</f:for>
								</tbody>
							</table>
						</div>
            		</f:else>
				</f:if>
			</div>
        </div>
    </div>
</div>
<script>
	$("#selectCountType").change(function () {
		$("#searchForm").submit();
	});
</script>
</f:section>
</html>